<template>
  <div class="headWrapper">
    <div class="left">
      <div class="open" @click="collapse">
        <Fold v-if="!menuStore.hideMenu" />
        <Expand v-if="menuStore.hideMenu" />
      </div>
      <div class="title">

      </div>
    </div>
    <div class="right">
      <!-- 全屏 -->
      <FullScreenItem />
      <!-- 用户 -->
      <el-popover
        class="box-item"
        title="Title"
        content="Bottom Center prompts info"
        placement="bottom"
      >
        <template #reference>
          <div class="userInfo">
            <div class="avatar"></div>
            <div class="name">你好，张老师</div>
          </div>
        </template>
      </el-popover>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {Fold,Expand} from '@element-plus/icons-vue';
import { ElPopover } from 'element-plus';
import {useMenuStore} from '@/stores/useMenuStore';
import FullScreenItem from './components/full-screen-item/index.vue';

const menuStore = useMenuStore();


// 收缩菜单栏
const collapse = () => {
  menuStore.setHideMenu();
}


</script>

<style lang="scss">
@use "./head.scss";
</style>
